import React, { useEffect, useRef } from 'react';
// import useMessageState from '../utils/useMessageState';
import useChatState from '../utils/useChatState';
import Iconfont from '@/components/Iconfont';
import MessageItem from './MessageItem';

import styles from '../style/Message.scss';

const Message = ({ data }) => {
  const messageRef = useRef();
  const { message: list } = useChatState({
    data,
  });

  // useEffect(() => {
  //   sendMessage({
  //     codeType: 100001,
  //     roomId: id,
  //     message: '进入直播间',
  //   });
  //   sendMessage({
  //     codeType: 100005,
  //     roomId: id,
  //     message: '进入直播间',
  //   });
  //   return () => {
  //     sendMessage({
  //       codeType: 100002,
  //       roomId: id,
  //       message: '退出直播间',
  //     });
  //     socket?.closeHandle();
  //   };
  // }, []);

  useEffect(() => {
    if (list.length) {
      // 滚动到底部
      setTimeout(() => {
        const { scrollHeight } = messageRef.current;
        if (scrollHeight) messageRef.current.scrollTop = scrollHeight;
      }, 200);
    }
  }, [list]);

  return (
    <div className={styles.container} ref={messageRef}>
      <div className={styles.notify}>
        <Iconfont className={styles.notifyIcon} name="tongzhi" />
        <span>政治、暴力、色情、赌博等不良内容，勿添加任何QQ、微信等联系方式，谨防各种欺诈，平台将对直摘内容进行24小时巡查，如有问题请与客服联系!</span>
      </div>
      <MessageItem list={list} />
    </div>
  );
};

Message.defaultProps = {
  list: [],
};

export default Message;
